<template>
  <div class="WxuserList">
    <!-- <el-form :inline="true">
      <el-form-item class="first">
        <el-input type="text" v-model="name" placeholder="用户名字" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item class="first">
          <el-button type="primary" @click="getWxUserList()">搜索</el-button>
      </el-form-item>
    </el-form> -->
    <el-table :data="WxUserList" v-loading="loading" :visible.sync="dialogtableVisible" border>
      <el-table-column
        prop="nickName"
        label="昵称">
      </el-table-column>
      <el-table-column
        prop="avatarUrl"
        label="头像">
        <template slot-scope="scope">
          <img :src="scope.row.avatarUrl||noAva" />
        </template>
      </el-table-column>
      <el-table-column
        prop="wx_bind_tel"
        label="手机号">
      </el-table-column>
      <el-table-column
        prop="last_login_time"
        label="上次登录时间">
        <template slot-scope="scope">
          <p v-html="scope.row.last_login_time"></p>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="10"
      :total="pagination.total"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>
<script>
import axios from 'axios'
// import qs from 'qs'

export default {
  data () {
    return {
      name: '',
      WxUserList: [],
      wxuserpage: 1,
      pagination: {
        total: ''
      },
      dialogFormVisible: false,
      dialogtableVisible: false,
      formLabelWidth: '120px',
      noAva: '',
      loading: false,
      userPerfile: {},
      disabled: true
    }
  },
  async mounted () {
    this.getWxuser(1)
  },
  methods: {
    // 翻页功能
    async handleCurrentChange (val) {
      console.log(val)
      this.loading = true
      await this.getWxuser(val)
      this.loading = false
    },
    async getWxuser (page = 1) {
      if (page < 1) {
        page = 1
      }
      let res = await axios.get('/uni-app-doc-pdf/get-log?page=' + page)
      if (res.data.errno === 0) {
        const result = res.data
        this.WxUserList = result.data
        this.pagination.total = result.count
        console.log(this.WxUserList)
        // for (let i = 0; i < this.WxUserList.length; i++) {
        //   this.WxUserList[i].isLogin = this.WxUserList[i].avatarUrl ? 1 : 0
        //   this.WxUserList[i].role = String(this.WxUserList[i].role || 1)
        //   let j = new Date(this.WxUserList[i].last_login_time * 1000)
        //   let y = j.getFullYear()
        //   let m = j.getMonth() + 1
        //   let d = j.getDate()
        //   this.WxUserList[i].last_login_time = y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' <br> ' + j.toTimeString().substr(0, 8)
        // }
      }
    }
  }
}
</script>
<style lang="sass">
.WxuserList
  max-width: 1200px
  margin: 0 auto
  text-align: right
.first
  display: inline-block
  margin-right: 10px
  vertical-align: top
.el-table__header-wrapper
  border-top: 1px solid #EBEEF5
.el-table
  th.is-leaf
    font-size: 16px
    text-align: center
.cell
  text-align: center
.cell img
  width: 132px
  height: 132px
  border-radius: 50%
.el-button--primary
  margin-bottom: 22px !important
  background: #409EFF
.el-pagination
  margin-top: 40px
  margin-bottom: 60px
.detailavat
  .el-form-item__content
    margin-right: 120px !important
    text-align: center
  img
    width: 132px;
    height: 132px;
    border-radius: 50%
.xinxi
  width: 50%
  float: left
.wxUserInfo
  .el-input.is-disabled .el-input__inner
    background-color: #fff
    cursor: auto
    color: #606266
</style>
